<template>
  <div id="app">
    <TopBar/>
    <Header/>
    <router-view/>
    <Footer/>

    <Login v-show="isShowLoginModal"/>
    <transition name="fade">
      <Toast v-show="isShowToast"/>
    </transition>
  </div>
</template>

<script>
import TopBar from './components/TapBar.vue'
import Header from './components/Header.vue'
import Footer from './components/Footer.vue'
import Login from './components/Login.vue'
import Toast from './components/Toast.vue'
import {mapState} from 'vuex'

export default {
  data() {
    return {

    }
  },
  components:{
    TopBar,
    Header,
    Footer,
    Login,
    Toast
  },
  computed:{
    ...mapState({
      isShowLoginModal:state => state.showLoginModal.isShowLoginModal,
      isShowToast:state => state.toastStatus.isShowToast
    })
  }
}
</script>

<style lang="less">
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity .5s ease;
}

.fade-enter-to,
.fade-leave-form {
  opacity: 1;
}


</style>
